<template>
  <el-cascader
    style="width: 200px"
    filterable
    :class="{ 'cascader-input': initValueFlag }"
    v-model="value"
    :options="cascader_options"
    :props="cascader_props"
    @change="changeValue"
    :placeholder="initValue"
  ></el-cascader>
</template>
<script>
  import { GetCity } from "../../../api/index"
  export default {
    name: "",
    props: {
      // 配置
      mapLocation: {
        type: Boolean,
        default: false,
      },
      cityAreaValue: {
        type: String,
        default: "",
      },
    },
    data() {
      const _this = this
      return {
        value: [],
        initValueFlag: false,
        initValue: "请选择省市区",
        cascader_options: [],
        address: [],
        addressData: {},
        initValueFlag: false,
        cascader_props: {
          lazy: true,
          lazyLoad(node, resolve) {
            // console.log(node);
            const level = node.level
            const requestData = {}
            // 声明自定义配置
            const jsonType = {
              0: { type: "province" },
              1: { type: "city", code: "province" },
              2: { type: "area", code: "city" },
            }
            // es6模板字符串拼接
            if (jsonType[level].code) {
              requestData[`${jsonType[level].code}_code`] = node.value
            }
            // type
            requestData.type = jsonType[level].type
            // 省市区的接口
            GetCity(requestData).then((resonse) => {
              const data = resonse.data.data.data
              // 类型,转大写字母
              const type = jsonType[level].type.toUpperCase()
              // 自定义value、label,模板字符串拼接
              data.forEach((item) => {
                item.value = item[`${type}_CODE`]
                item.label = item[`${type}_NAME`]
                // 最后一层选择
                if (level === 2) {
                  item.leaf = level >= 2
                }
              })
              // 存储省市区数据
              _this.addressData[jsonType[level].type] = data
              // console.log(_this.addressData)
              // 返回节点数据
              resolve(data)
            })
            // 获取address
            if (node.level !== 0) {
              _this.getAddress(node)
            }
          },
        },
      }
    },
    methods: {
      // 初始化省市区
      initDefault(val) {
        // console.log(val, "val")
        if (val) {
          this.initValueFlag = true
          this.initValue = val.split(",").join("/")
        }
      },
      changeValue(val) {
        this.$emit("update:cityAreaValue", val.join())
        // console.log(val, "val")
        // 匹配最后一项,区县
        const lastCode = val[val.length - 1]
        const area = this.addressData.area.filter(
          (item) => item.value == lastCode
        )[0]
        // console.log(area, "area")
        this.address[2] = area.label
        // this.$emit("callback", this.address.join(""))
        this.getAddress()
      },
      /** 获取中文地址 */
      getAddress(node) {
        if (node) {
          const index = node.level - 1
          this.address[index] = node.label
        }
        // console.log(this.address.join(""))
        // this.$emit("callback", this.address.join(""))
        // 为 true 时，执行地图交互
        if (this.mapLocation) {
          this.$emit("callback", {
            function: "setMapCenter",
            data: {
              address: this.address.join(""),
            },
          })
          // this.$emit("callback", this.address.join(""))
        }
      },
    },
    mounted() {},
  }
</script>
<style lang='scss'>
  .cascader-input {
    input::-webkit-input-placeholder {
      color: #606266;
    }
    input::-moz-placeholder {
      color: #606266;
    }
    input::-moz-input-placeholder {
      color: #606266;
    }
    input:-ms-input-placeholder {
      color: #606266;
    }
  }
</style>